<template>
  <a-modal
    v-model="visible"
    :title="type ? '创建企业' : '更新税局信息'"
    :confirm-loading="confirmLoading"
    :destroyOnClose="true"
    :class="!status ? 'status-m' : ''"
    @ok="handleOk"
    @cancel="$emit('update:visible', false)"
  >
    <a-form :form="form" :selfUpdate="true" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }" v-if="status">
      <div v-if="type" class="add">
        <div class="form-tit">企业信息</div>
        <a-form-item label="企业名称">
          <a-input placeholder="请输入" v-decorator="['name', { rules: [{ required: true, message: '企业名称不能为空' }] }]" />
        </a-form-item>
        <a-form-item label="统一社会信用代码">
          <a-input placeholder="请输入" v-decorator="['taxNo', { rules: [{ required: true, message: '统一社会信用代码不能为空' }] }]" />
        </a-form-item>
        <div class="form-tit">税局信息</div>
        <a-form-item label="报税所属区域">
          <a-input
            v-show="false"
            placeholder="请输入"
            v-decorator="['areaCodeList', { rules: [{ required: true, message: '报税所属区域不能为空' }] }]"
          />
          <cityTreeSelect :visible="visible" @upDate="upDate" />
        </a-form-item>
      </div>
      <div v-else>
        <a-form-item label="企业名称">
          <a-select
            v-decorator="['id', { rules: [{ required: true, message: '企业名称不能为空' }] }]"
            placeholder="请选择"
            show-search
            :filter-option="filterOption"
          >
            <a-select-option :value="item.id" v-for="item in companiesArr" :key="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="报税所属区域">
          <a-input
            v-show="false"
            placeholder="请输入"
            v-decorator="['areaCodeList', { rules: [{ required: true, message: '请选择报税所属区域' }] }]"
          />
          <cityTreeSelect :visible="visible" @upDate="upDate" />
        </a-form-item>
      </div>
    </a-form>
    <div v-else class="status">
      <img :src="s" class="status-img" />
      <div class="status-tit mb16">添加企业成功</div>
      <div class="status-num" v-for="(item, index) in list" :key="index">
        {{ index }}获取到 <span>{{ item }}</span> 个税务局信息
      </div>
      <a-button type="primary" class="mt32" @click="onOK"> 确认 </a-button>
    </div>
  </a-modal>
</template>

<script>
import cityTreeSelect from "../../component/cityTreeSelect";
import { getCompaniesListAll, postTaxCompanies, putTaxCompanies } from "../api";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: Boolean,
      default: true
    }
  },
  components: {
    cityTreeSelect
  },
  watch: {
    visible(v) {
      if (v) {
        if (!this.type) this.onGetCompaniesListAll();
        this.status = true;
        this.form.resetFields();
      }
    }
  },
  created() {},
  data() {
    return {
      s: require("@/assets/taxCalculate/success.png"),
      status: true,
      list: [],
      confirmLoading: false,
      form: this.$form.createForm(this, {}),
      companiesArr: []
    };
  },
  methods: {
    async onGetCompaniesListAll(v) {
      try {
        const { data } = await getCompaniesListAll(v);
        this.companiesArr = data;
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    async onPostCompanies(v) {
      try {
        const { data } = await postTaxCompanies(v);
        this.list = data;
        this.confirmLoading = false;
        this.status = false;
      } catch (err) {
        console.log("error log --> ", err);
        this.confirmLoading = false;
      }
    },
    async onPutCompanies(v) {
      try {
        let name = "";
        let taxNo = "";
        this.companiesArr.some((e) => {
          if (e.id === v.id) {
            name = e.name;
            taxNo = e.taxNo;
            return true;
          }
        });
        const { data } = await putTaxCompanies({ ...v, name, taxNo });
        this.list = data;
        this.confirmLoading = false;
        this.status = false;
      } catch (err) {
        console.log("error log --> ", err);
        this.confirmLoading = false;
      }
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true;
          values.areaCodeList = JSON.parse(values.areaCodeList);
          console.log(values);
          if (this.type) {
            this.onPostCompanies(values);
          } else {
            this.onPutCompanies(values);
          }
        }
      });
    },
    onOK() {
      this.$emit("update:visible", false);
      this.$emit("upDate");
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    upDate(v) {
      setTimeout(() => {
        this.form.setFieldsValue({
          areaCodeList: JSON.stringify(v)
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.form-tit {
  font-size: 16px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #3c3d43;
  margin-bottom: 24px;
}
.add ::v-deep .ant-form-item-label .ant-form-item-required {
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400 !important;
  color: #767885 !important;
}
.status {
  text-align: center;
}
.status-img {
  width: 138px;
  height: 150px;
  margin: 32px auto 24px auto;
}
.status-tit {
  font-size: 16px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  color: #3c3d43;
}
.status-num {
  font-size: 14px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #767885;
  span {
    font-weight: 500;
    color: var(--primary);
  }
}
.status-m ::v-deep .ant-modal-footer {
  display: none;
}
</style>
